<template>
  <div v-analytics.pageview>
    <topbar category="Continue With Email Page" :nextAction="nextAction" rightTitle="Next"></topbar>
    <div class="login-content">
      <img src="~assets/login/emailBg.png" class="login-ideograph">
      <label class="login-label">{{email}}</label>
      <div
        :class="$style.emailGroup"
        v-analytics.click="{
          action: 'Input Email address',
          category: 'Continue With Email Page',
        }"
      >
        <input type="email" name="email" class="form-control" v-model="inputText" />
        <auto-compolete @on-select="onSelect" :inputText="inputText"></auto-compolete>
      </div>
    </div>
    <loading :show="showLoading" />
  </div>
</template>

<script>
import { button, toast, loading, topbar } from 'components'
import autoCompolete from './autoCompolete'

export default {
  name: 'byEmail',
  components: {
    vButton: button,
    topbar,
    loading,
    autoCompolete,
  },
  data() {
    return {
      email: 'Input your email addresss',
      inputText: '',
      showLoading: false,
    }
  },
  methods: {
    onSelect(val) {
      this.inputText = val
    },
    nextAction() {
      if (!this.inputText) {
        toast('Please enter your email address')
      } else {
        this.showLoading = true
        this.$store.dispatch('checkEmail', { email: this.inputText })
          .then((res) => {
            this.showLoading = false
            if (res.code === 1000) {
              sessionStorage.isLogin = 0
              this.$router.push({ path: '/login/passwd', query: { email: this.inputText } })
            } else if (res.code === 3500) {
              sessionStorage.isLogin = 1
              this.$router.push({ path: '/login/passwd', query: { email: this.inputText } })
            } else {
              toast(res.info)
            }
          })
      }
    },
  },
}
</script>

<style module lang="scss">
.emailImg {
  width: 120px;
  height: 120px;
}

.inputContent {
  margin-top: 16px;
}

.emailGroup {
  position: relative;
}
</style>
